<template>
  <div class="leave-message-page common-page">
    <van-list
      v-if="list.length"
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      @load="getList"
      finished-text="没有更多了"
      style="margin-bottom: 50px"
    >
      <div class="list">
        <leave-message-item
          v-for="(item, index) in list"
          :key="index"
          :leaveMessageInfo="item"
          class="leave-message-item-box"
          @enterToDetailPage="enterToDetailPage"
        ></leave-message-item>
      </div>
    </van-list>
    <empty-data
      description="空空如也~"
      :emptyImg="emptyImg"
      v-if="!list.length"
    ></empty-data>
    <suspension-btn
      class="leave-message-fixed"
      @enterToLeaveMessagePage="enterToLeaveMessagePage"
    ></suspension-btn>
    <!-- <div class="leave-message-fixed" @mousedown="down" @touchstart.stop="down" @mousemove="move"
        @touchmove.stop="move" @mouseup="end" @touchend.stop="end" :style="{top:position.y+'px', left:position.x+'px'}">

    </div> -->
  </div>
</template>

<script>
import { Cell, CellGroup, List } from "vant";
import { mapGetters } from "vuex";
import SuspensionBtn from "@/components/SuspensionBtn";
import EmptyData from "@/components/EmptyData";
import LeaveMessageItem from "@/components/LeaveMessageItem";
import Share from "./mixin/share";
import apiMessage from "@/common/api/apiMessage";
export default {
  name: "LeaveMessageList",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [List.name]: List,
    [SuspensionBtn.name]: SuspensionBtn,
    [EmptyData.name]: EmptyData,
    [LeaveMessageItem.name]: LeaveMessageItem,
  },
  mixins: [Share],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.setShare();
    this.getList();
  },
  mounted() {},
  methods: {
    //  获取留言列表s
    getList() {
      this.$toast.loading();
      apiMessage
        .getMessageList({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.loading = false;
          this.finished = true;
          if (data.data.length) {
            for (let index in data.data) {
              this.$set(
                data.data[index],
                "answerContent",
                this.filterStr(data.data[index].answer)
              );
            }
          }
          this.list = data.data;
        });
    },
    filterStr(str) {
      var re = /<[^>]+>/gi;
      str = str.replace(re, "");
      return str;
    },
    // 进入留言页面
    enterToLeaveMessagePage() {
      this.$router.push({
        path: "/leaveMessage",
      });
    },
    //  进入留言详情页面
    enterToDetailPage(info) {
      this.$router.push({
        path: "/leaveMessageDetail",
        query: {
          id: info.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.leave-message-page {
  padding-left: 0;
  padding-right: 0;
}
.leave-message-fixed {
  position: fixed;
  right: 32px;
  bottom: 362px;
}
.leave-message-item-box {
  border-bottom: 1px solid #f5f5f5;
}
</style>
